<template>

  <div class="panel">
    <el-form :rules="rules" :inline="false" ref="form" :model="form">
      <h4>工作出勤时长要求设置</h4>
      <el-row :gutter="20">
      <el-col :span="10">
        <el-form-item label="周期选择" align="right" prop="z_AttendanceType">
          <el-select v-model="form.z_AttendanceType" align="left" placeholder="请选择">
            <el-option label="每周" :value="0"></el-option>
            <el-option label="每月" :value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="小时" align="right" prop="z_TotalHours">
          <el-input v-model="form.z_TotalHours" align="left"></el-input>
        </el-form-item>
      </el-col>
      </el-row>
      <h4>打卡时间段设置</h4>
      <el-row :gutter="20">
      <el-col :span="10">
        <el-form-item label="开始时间" align="right" prop="z_Time0">
          <el-time-picker
              :picker-options="pickerOptions"
              value-format="HH:mm"
              v-model="form.z_Time0"
              placeholder="请选择">
          </el-time-picker>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="结束时间" align="right" prop="z_Time1">
          <el-time-picker
              :picker-options="pickerOptions"
              value-format="HH:mm"
              v-model="form.z_Time1"
              placeholder="请选择">
          </el-time-picker>
        </el-form-item>
      </el-col>
      </el-row>
      <h4><span style="color: #f56c6c;margin-right: 4px;">*</span>工作日设置</h4>
      <el-form-item label="">
        <el-checkbox @change="weekChange" v-model="form.z_Week1Checked">星期一</el-checkbox>
        <el-checkbox @change="weekChange" v-model="form.z_Week2Checked">星期二</el-checkbox>
        <el-checkbox @change="weekChange" v-model="form.z_Week3Checked">星期三</el-checkbox>
        <el-checkbox @change="weekChange" v-model="form.z_Week4Checked">星期四</el-checkbox>
        <el-checkbox @change="weekChange" v-model="form.z_Week5Checked">星期五</el-checkbox>
        <el-checkbox @change="weekChange" v-model="form.z_Week6Checked">星期六</el-checkbox>
        <el-checkbox @change="weekChange" v-model="form.z_Week7Checked">星期日</el-checkbox>
        <p v-if="weekdayTips" style="color: #f56c6c;">请选择工作日</p>
      </el-form-item>
      <h4>缺卡设置</h4>
      <el-form-item label="">
        <el-checkbox v-model="form.z_IsAbsent">工作日不打卡记为旷工</el-checkbox>
      </el-form-item>
      <h4>节假日设置</h4>
      <el-form-item label="">
        <el-checkbox v-model="form.holidaysIsValid">节假日是否生效</el-checkbox>
      </el-form-item>
    </el-form>
  </div>


</template>
<script>
import Panel from "@/components/panel.vue";
import Pagination from "@/components/Pagination/index.vue";
export default {
    components:{
        Panel,
        Pagination
    },
    data() {
      // var validateZ_AttendanceType = (rule, value, callback) => {
      //   if (value == '') {
      //     // 请输入班次名称
      //     callback(new Error('请选择周期'));
      //   }else{
      //     callback();
      //   }
      // };
      var validateZ_AttendanceType = (rule, value, callback) => {
        if (value === '') {
          // 请选择周期
          callback(new Error('请选择周期'));
        }else{
          callback();
        }
      };
      var validateZ_Time0 = (rule, value, callback) => {
        let self = this.form;
        // console.log(100, self);
        if (!value ) {
          // 请选择周期
          callback(new Error('请选择开始时间'));
        } else if (value.length > 0 && self.z_Time1?.length > 0) {
          if (this.timeChange(value) > this.timeChange(self.z_Time1)) {
            callback(new Error('开始时间不能比结束时间早'))
          } else {
            callback()
          }
        } else {
          callback();
        }
      };
      var validateZ_Time1 = (rule, value, callback) => {
        let self = this.form;
        // console.log(101, self);
        if (!value ) {
          // 请选择周期
          callback(new Error('请选择结束时间'));
        } else if (value.length > 0 && self.z_Time0?.length > 0) {
          if (this.timeChange(value) < this.timeChange(self.z_Time0)) {
            callback(new Error('开始时间不能比结束时间早'))
          } else {
            callback()
          }
        } else {
          callback();
        }
      };
      var validateZ_TotalHours = (rule, value, callback) => {
        let self = this.form;
        if (value === null||value==="") {
          // 请输入班次名称
          callback(new Error('请输入小时'));
        } else if (isNaN(value)) {
          callback("只能输入数字");
        } else if (value === 0) {
          callback("必须大于0");
        } else if (self.z_AttendanceType == 0 && value > 7*24) {
          callback("不能超过"+7*24+"小时");
        } else if (self.z_AttendanceType == 1 && value > 30*24) {
          callback("不能超过"+30*24+"小时");
        } else {
          callback();
        }
      };
    return {
      rules: {
        z_AttendanceType: [
          { validator: validateZ_AttendanceType, required: true, trigger: 'blur'}
        ],
        z_Time0: [
          { validator: validateZ_Time0,required: true, trigger: 'blur'}
        ],
        z_Time1: [
          { validator: validateZ_Time1,required: true, trigger: 'blur'}
        ],
        z_TotalHours: [
          { validator: validateZ_TotalHours,required: true, trigger: 'blur'}
        ],
        // timeSpanOfTime0Miss: [
        //   {  validator: validateTimeSpanOfBeLater,required: true, trigger: 'blur'}
        // ],
        // timeSpanOfLeaveEarly: [
        //   {  validator: validateTimeSpanOfBeLater,required: true, trigger: 'blur'}
        // ],
        // timeSpanOfTime1Miss: [
        //   {  validator: validateTimeSpanOfBeLater,required: true, trigger: 'blur'}
        // ],
      },
      pickerOptions: {
        format: 'HH:mm', // 格式化时间显示
        selectableRange:null // 设置可选时间范围
      },
      form:{
        z_AttendanceType:0,
        z_TotalHours:null,
        z_Time0:null,
        z_Time1:null,
        z_Week1Checked:false,
        z_Week2Checked:false,
        z_Week3Checked:false,
        z_Week4Checked:false,
        z_Week5Checked:false,
        z_Week6Checked:false,
        z_Week7Checked:false,
        z_IsAbsent:false,
        holidaysIsValid:false,
      },
      weekdayTips:false
    };
  },
  watch:{
    detailRow(newVal,oldVal){
      // debugger

      console.log('159detailRow变化了',newVal);
    }
  },
  props: {
    handleTypeSub:{
      type:String,
      default:""
    },
    detailRow:{
      type:Object,
      default:()=>{
        return {}
      }
    }
  },
  methods:{
    timeChange(str) {
      let arr = str.split(':');
      return arr[0]*3600 + arr[1]*60 + arr[2];
    },
    weekChange(){
      if (!this.hasTrueValue()) {
        this.weekdayTips=true
      }else{
        this.weekdayTips=false
      }
    },
    hasTrueValue() {
      var item=[this.form.z_Week1Checked,this.form.z_Week1Checked,this.form.z_Week2Checked,this.form.z_Week3Checked,this.form.z_Week4Checked,this.form.z_Week5Checked,this.form.z_Week6Checked,this.form.z_Week7Checked]

      return item.some(value => value === true);


    },
    childrenGetParams(){
      this.$refs.form.validate((valid) => {
        if (!this.hasTrueValue()) {
          valid=false
          this.weekdayTips=true
        }else{
          this.weekdayTips=false
        }
        // weekdayTips

        if (valid){
          var res= JSON.parse(JSON.stringify(this.form))
          if (res.z_Time0.split(":").length==2){
            res.z_Time0+=":00"
          }
          if (res.z_Time1.split(":").length==2){
            res.z_Time1+=":00"
          }
          console.log('子组件表单验证通过',res);
          this.$emit('getParams', res);
        } else {
          console.log('子组件表单验证未通过');
          this.$emit('getParams', false);
          return false;
        }
      })
    }
  },
  mounted(){
    if (this.handleTypeSub=="edit"){
      var params=JSON.parse(JSON.stringify(this.detailRow))
      delete params.type
      delete params.name
      this.form=params
    }
    console.log(this.detailRow);

  }
}
</script>
<style scoped lang="scss">
::v-deep .el-form .el-col .el-form-item__label {
  width: 80px !important;
  text-align: right;
}
::v-deep .el-form .el-col .el-form-item__content {
  display: inline-block;
}
.el-message-box__content .el-message-box__message,
.el-message-box__content .el-message-box__status {
  display: inline-block;
}

::v-deep .el-form .el-col .el-input,
::v-deep .el-form .el-col .el-select {
  width: 220px !important;
}

@import '../index.scss';
</style>
